import {Component, ViewChild} from '@angular/core';
import {NzNotificationService} from "ng-zorro-antd/notification";
import {Store} from "@ngrx/store";
import {stepState} from "../store/reducers/step.reducers";
import {nextCurrent, preCurrent, setStepData} from "../store/actions/step.actions";
import {Step1Component} from '../step1/step1.component'
import {Step2Component} from '../step2/step2.component'
import {from, interval, of, scan, Subscription, switchMap} from "rxjs";
import {Step3Component} from "../step3/step3.component";
import {Step1, Step2, Step3} from "../store/models/step.model";

@Component({
  selector: 'app-step',
  templateUrl: './step.component.html',
  styleUrls: ['./step.component.less']
})
export class StepComponent {
  @ViewChild('step1Component', {static: true}) step1Component: Step1Component | undefined
  @ViewChild('step2Component', {static: true}) step2Component: Step2Component | undefined
  @ViewChild('step3Component', {static: true}) step3Component: Step3Component | undefined
  current = 0;
  autoSubscription: Subscription | undefined;
  constructor(
    private notification: NzNotificationService,
    private store: Store<{ step: stepState }>) {
    store.select('step').subscribe((res) => {
      this.current = res.current
    });
  }

  ngOnInit() {
    // this.test()
    this.autoSave()
  }

  pre(): void {
    this.store.dispatch(preCurrent())
  }

  next(): void {
    if (this.step1Component?.checkStep1Data() && this.current === 0) {
      const data : { data: Step1 } = this.step1Component?.getStep1Data()
      this.store.dispatch(setStepData(data))
      this.store.dispatch(nextCurrent())
      return
    }
    if (this.step2Component?.checkStep2Data() && this.current === 1) {
      const data: { data: Step2 } = this.step2Component?.getStep2Data()
      this.store.dispatch(setStepData(data))
      this.store.dispatch(nextCurrent())
      return
    }
    if (this.step3Component?.checkStep3Data() && this.current === 2) {
      const data : { data: Step3 }= this.step3Component?.getStep3Data()
      this.store.dispatch(setStepData(data))
      this.store.dispatch(nextCurrent())
      return
    }
  }

  done(): void {
    this.notification.create(
      'success',
      '完成表单~',
      ''
    );
  }

  cancel() {

  }

  checkCurrent(number: number) {
    if (number === this.current) return false;
    return true;
  }

  autoSave(){
    this.autoSubscription = interval(10000).subscribe(() => {
      this.notification.create(
        'success',
        '保存成功~',
        ''
      );
    });
  }
  ngOnDestroy(){
    this.autoSubscription?.unsubscribe()
  }
  // test
  test() {
    // If you save the logic for the end instead of each step
    // step1 a === true , so that step2 retain D , Otherwise retain E
    //       c > 5 , so that step2 retain E , Otherwise retain D
    // step2 D = 'a1' , so that step3 retain F, Otherwise retain G
    //       E include 'a1' , so that step3 retain H,
    const data = {
      step1: {
        A: true,
        B: '张三',
        C: 5
      },
      step2: {
        D: 'a1',
        E: ['a1', 'b2']
      },
      step3: {
        F: 'F',
        G: 'G',
        H: 'H'
      }
    }
    from([data.step1]).pipe(
      switchMap(step1 => {
        let filteredStep2: { [key: string]: any } = {};
        if (step1.A === true) {
          filteredStep2['D'] = data.step2.D
        } else {
          filteredStep2['E'] = data.step2.E
        }
        return of({step1, filteredStep2});
      }),
      switchMap(({step1, filteredStep2}) => {
        const filteredStep3: { [key: string]: any } = {};
        if (filteredStep2?.['D'] === 'a1') {
          filteredStep3['F'] = data.step3.F
        } else {
          filteredStep3['G'] = data.step3.G
        }
        if (filteredStep2?.['E']?.includes('a1')) {
          filteredStep3['H'] = data.step3.H
        }
        return of({step1, filteredStep2, filteredStep3});
      }),
      scan((acc, {step1, filteredStep2, filteredStep3}) => {
        return {
          ...acc,
          step1,
          step2: filteredStep2,
          step3: filteredStep3
        };
      }, {})
    ).subscribe(result => console.log(result));
  }
}
